<template>
  <div :class="{menuTag:true,dark:isDark}" @click="tagClick">
    <i :class="icon" v-if="icon"/>
    {{title}}
  </div>
</template>

<script lang="ts">
import {Component, Vue,Prop} from 'vue-property-decorator';

@Component
export default class MenuTag extends Vue {
  @Prop({default: ''}) private title!: string;
  @Prop({default: false}) private isDark!: boolean;
  @Prop({default: ''}) private icon!: string;
  tagClick(){
    this.$emit('click');
  }
}
</script>
<style lang="scss" scoped>
.menuTag{
  color: #006400;
  border: 1px solid #006400;
  border-radius: 3px;
  padding: 2px;
  min-width: 59px;
  background: #ffffff
  ;
  font-size: 12px;
  cursor: pointer;
  &.dark{
    color: #ffffff;
    border: 1px solid #ffffff;
    background: none;
  }
}
</style>
